<template>
  <div>
    <div class="card-container">
      <el-card class="box-card" v-for="(card,index) in cards" :key="index" :style="{background:card.color}"
               shadow="hover">
        <div class="card-content" v-for="(msg,i) in card.contents" :key="i">
          {{ msg.title }}:{{ msg.value }}
        </div>
        <div>
          <el-button class="card-button" type="text">详情</el-button>
        </div>
      </el-card>
    </div>
    <div id="mychart" ref="mychart"></div>
    <!--    <el-card class="notification-card">发布通知</el-card>-->
  </div>
</template>

<script>

import {getCards, getPieSliceData} from "@/api/indexPage";

import * as echarts from 'echarts/core';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import {PieChart} from 'echarts/charts';
import {LabelLayout} from 'echarts/features';
import {CanvasRenderer} from 'echarts/renderers';

echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout
]);

export default {
  name: "HeadPage",
  data() {
    return {
      cards: [],

    }
  },
  methods: {
    initEcharts() {
      let option = {
        title: {
          text: '人数信息饼状图',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'right'
        },
        series: [
          {
            name: '详情',
            type: 'pie',
            radius: '50%',
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      //加载数据
      getPieSliceData().then(res => {
        console.log(res.data)
        option.series[0].data = res.data;
        this.myChart = echarts.init(this.$refs.mychart);
        this.myChart.setOption(option);
      })

    },
  },
  mounted() {
    getCards().then(res => {
      this.cards = res.data
    });
    this.initEcharts();
  }
}
</script>

<style scoped>
.box-card {
  margin-left: 20px;
  /*margin-top: 20px;*/
  margin-bottom: 20px;
  color: #E9EEF3;
  width: 300px;
  height: 120px;
  display: inline-block;
}

.card-content {
  margin-bottom: 18px;
  width: auto;
}

.card-button {
  color: #E9EEF3;
  width: 100%;
  /*float: right;*/
  /*position: relative;*/
  /*right: 0;*/
  padding: 5px 0;
}

#mychart {
  /*float: left;*/
  /*display: inline-block;*/
  margin-top: 30px;
  margin-left: 300px;
  position: relative;
  width: 50%;
  height: 450px;
}

.notification-card {
  /*position: relative;*/
  color: white;
  background-color: #bd0f0f;
  text-align: center;
  margin-left: 60px;
  margin-bottom: 200px;
  /*padding-top: 80px;*/
  font-size: 50px;
  font-weight: 800;
  display: inline-block;
  width: 380px;
  height: 250px;
}
</style>
